<template>
  <div :class="['my-switch-wrap', isActive1?'my-switch-wrap-active': '']" @click="onClick">
    <div :class="['item', isActive2?'item-active': '']"></div>
  </div>
</template>
<script>
export default {
  name: "MySwitch",
  data() {
    return {
      isActive1: false,
      isActive2: false
    };
  },
  beforeCreate() {
    console.log(1);
  },
  created() {
    console.log(2);
  },
  beforeMount() {
    console.log(3);
  },
  mounted() {
    console.log(4);
  },
  methods: {
    // 点击事件回调
    onClick() {
      // 取反，原来打开状态 就变为关闭状态，原来关闭状态就变打开状态
      this.isActive1 = !this.isActive1;
      this.isActive2 = !this.isActive2;
    }
  }
};
</script>
<style scoped>
.my-switch-wrap {
  position: relative;
  width: 80px;
  height: 40px;
  background: #ccc;
  border-radius: 20px;
  transition: all 0.5s;
  cursor: pointer;
}
.item {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  position: absolute;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: all 0.5s;
}
.my-switch-wrap-active {
  background: #1890ff;
}
.item-active {
  left: 43px;
}
</style>